<template>
  <view style="overflow: scroll">
    <image class="base-img" :src="reviewBaseImg" mode="widthFix"></image>
    <tn-button id="print_btn" @click="cusRenderDom" class="btn">打印</tn-button>

    <sp-html2pdf-render
        domId="render-dom"
        ref="renderRef"
		:showLoading="false"
        @renderOver="renderOver"
        :auto-open="false"
    ></sp-html2pdf-render>
    <!--    -->
    <view id="render-dom">
      <view class="table">

        <view>
          <view class="title">勘验（检查）笔录</view>
          <view class="sub-title">案号：{{ jsonData.caseInfo }}</view>
          <view class="content-text">

            <view class="tn-flex">
              <view>案由:</view>
              <view class="unline tn-flex-1">{{ anyou }}</view>
            </view>

            <view class="tn-flex">
              <view>勘验（检查）时间:</view>
              <view class="unline" style="flex: 1;text-align: center">{{ jsonData.inquestSt || '/' }}</view>
              <view>至</view>
              <view class="unline" style="flex: 1;text-align: center;">{{ jsonData.inquestEn || '/' }}</view>
            </view>

            <view class="tn-flex">
              <view>勘验（检查）场所:</view>
              <view class="unline tn-flex-1  tn-text-center" style="font-size: 16px;">{{
                  com_changsuo
                }}
              </view>
              <view>天气情况:</view>
              <view class="unline tn-text-center" style="width: 100px;">{{ weather }}</view>
            </view>

            <view class="tn-flex" style="font-size: 12px;" v-for="(user, index) in com_kancharen" :key="index">
              <view>勘验(检查)人:</view>
              <view class="unline tn-text-center" style="width: 8em;">{{ user.name }}</view>
              <view>单位:</view>
              <view class="unline tn-flex-1 tn-text-center">{{ user.post }}</view>
            </view>


            <view class="tn-flex">
              <view>当事人(当事人代理人)姓名:</view>
              <view class="unline tn-flex-1  tn-text-center">{{ jsonData.clientName || '/' }}</view>
              <view>性别:</view>
              <view class="unline tn-text-center" style="width: 4em;">{{
                  sex
                }}
              </view>
              <view>年龄:</view>
              <view class="unline tn-text-center" style="width: 3em;">{{ jsonData.clientAge || '/' }}</view>
            </view>

            <view class="tn-flex">
              <view>身份证件号:</view>
              <view class="unline tn-text-center tn-flex-1" style="font-size: 17px;">{{
                  jsonData.clientIdcard
                }}{{ jsonData.clientIdcardNum || '/' }}
              </view>
              <view>单位及职务:</view>
              <view class="unline tn-text-center" style="width: 12em;font-size: 17px;">{{ jsonData.clientJob || '/' }}</view>
            </view>

            <view class="tn-flex">
              <view>住址:</view>
              <view class="unline tn-text-center tn-flex-1" style="font-size: 16px;">
                {{ jsonData.clientAddress || '/' }}
              </view>
              <view>联系电话:</view>
              <view class="unline tn-text-center" style="width: 110px;font-size: 18px;">{{ jsonData.clientTel || '/' }}</view>
            </view>

            <view class="tn-flex">
              <view>被邀请人:</view>
              <view class="unline tn-text-center" style="width: 5em;">{{ inviteName }}</view>
              <view>单位及职务:</view>
              <view class="unline tn-flex-1 tn-text-center">{{ inviteCom }}</view>
            </view>


            <view class="tn-flex">
              <view>记录人:</view>
              <view class="unline tn-text-center" style="width: 5em;">{{ jiluren }}</view>
              <view>单位:</view>
              <view class="unline tn-flex-1 tn-text-center" style="font-size: 14px;">{{ jilurendanwei }}
              </view>
            </view>

            <view style=" margin-top: 15px;line-height:30px;">
              <view class="unline" style="padding: 5px 0;" v-for="line in content" :key="line">{{ line }}</view>
            </view>


          </view>

          <view style="font-size: 20px;border-top: 1px solid #000;margin-top: 30px;padding-top: 10px;">
            <!--        签字-->
            <view style="line-height: 40px;text-align: center;">
              <view class="tn-flex tn-flex-row-between text-padding">
                <view class="tn-flex">
                  <view>当事人或其代理人签名：</view>
                  <view style="width: 120px;" class="unline">
                    <img v-if="jsonData.kyblSign1" style="width: 100%;height: 39px;float: left;" :src="jsonData.kyblSign1"/>
                  </view>
                </view>
                <view class="tn-flex">
                  <view>被邀请人签名：</view>
                  <view style="width: 120px;" class="unline">
                    <img v-if="jsonData.kyblSign2" style="width: 100%;height: 39px;float: left;" :src="jsonData.kyblSign2"/>
                  </view>
                </view>
              </view>

              <view class="tn-flex tn-flex-row-between text-padding">
                <view class="tn-flex">
                  <view>勘验（检查）人签名：</view>
                  <view style="width: 180px;" class="unline">
                    <img v-if="jsonData.kyblSign3" style="width: 100%;height: 39px;float: left;" :src="jsonData.kyblSign3"/>
                  </view>

                </view>
                <view class="tn-flex">
                  <view>记录人签名：</view>
                  <view style="width: 120px;" class="unline">
                    <img v-if="jsonData.kyblSign4" style="width: 100%;height: 39px;float: left;" :src="jsonData.kyblSign4"/>
                  </view>
                </view>
              </view>

              <view style="text-align: left;padding-top: 10px;">
                备注：{{ remark }}
              </view>

            </view>


          </view>

        </view>
      </view>

    </view>
  </view>
</template>

<script>
import {base64ToPath, urlToBase64} from "@/uni_modules/sp-html2pdf-render/utils";
import logo from "@/static/logo.png"
import {base64ToFile} from "@/utils/typeConversion";
import {getToken} from "@/utils/auth";
import {formatData, splitStringByMaxLength} from "@/pages/roadCompensation/tanhuajilu/formatData";
import {addDocPhoto, delDocPhoto, uploadLp, uploadLpPdf} from "@/api/lupeiwenshu";

export default {
  props: {
    jsonData: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      noCodeImg: true,

      reviewBaseImg: '',
      webImageBase: '',
      locImageBase: ''
    };
  },
  created() {
    this.handleImage()
  },
  computed: {
    content() {
      const text = this.jsonData.recoNote ? this.jsonData.recoNote?.result.replace(/#/g, '') : ''
      return splitStringByMaxLength('勘验（检查）情况及结果:' + text)
    },
    anyou() {
      return this.jsonData.recoNote?.caseReason || '/'
    },
    weather() {
      return this.jsonData.recoNote?.weather || '/'
    },
    inviteName() {
      return this.jsonData.recoNote?.inviteName || '/'
    },
    inviteCom() {
      return this.jsonData.recoNote?.inviteCom || '/'
    },
    jiluren() {
      return this.jsonData.recodeTOfficer?.name || '/'
    },
    jilurendanwei() {
      return this.jsonData.recodeTOfficer?.post || '/'
    },
    remark() {
      return this.jsonData.recoNote?.remark || '/'
    },
    sex() {
      if (this.jsonData.clientGender) {
        if (this.jsonData.clientGender === 1) {
          return '男'
        } else {
          return '女'
        }
      } else {
        return '/'
      }
    },
    com_changsuo(){
      return  this.jsonData.recoNote?.reclocate || '/'
    },
    com_kancharen(){
      if(this.jsonData?.officerList?.length){
        const newArr = this.jsonData.officerList.slice(0, 2);
        const result = [];
        for (let i = 0; i < newArr.length; i++) {
          const obj = {};
          if (newArr[i]) {
            obj.name = newArr[i].name||'/';
            obj.post = newArr[i].post||'/';
          }
          result.push(obj);
        }
        return  result;
      }else{
        return [{name:'/',post:'/'},{name:'/',post:'/'}]
      }

    }
  },
  mounted() {
    this.init()
  },
  methods: {
    cusRenderDom() {
      this.noCodeImg = false
      this.$refs.renderRef.h2pRenderDom()
    },
    cusRenderDomNoCodeImg() {
      this.noCodeImg = true
      this.$refs.renderRef.h2pRenderDom()
    },
    splitStringByMaxLength,
    init() {
    },
    handleImage() {
      /**
       * 使用urlToBase64将图片转换为base64格式，
       * 若图片不支持跨域则可能会报toDataURL on HTMLCanvasElement的错
       * 在hbuilderx内置浏览器中可能不会跨域，因为内置浏览器解除了跨域限制
       * 终极大法是将网络图片通过工具转换为base64保存至文件中再放入image标签里
       */
      // urlToBase64('https://mp-0ecede5c-a993-48bf-ba4b-45d9a8c7e79b.cdn.bspapp.com/resource/qqqun.jpg').then((res) => {
      //   this.webImageBase = res
      // })
      urlToBase64(logo).then((res) => {
        this.locImageBase = res
      })
    },
    renderOver(e) {
      // e为导出的图片（base64）
      // console.log('e', e);
      const file = base64ToFile(e, 'fjtp', 'png');
      console.log(file)
      base64ToPath(e).then(path => {
        // this.$emit('upload', {
        //   ...{
        //     code: 0,
        //     data: {
        //       url: 'http://47.92.235.205/lppdf/2025/08/13/1955435227065749506.pdf'
        //     }
        //   },
        //   path
        // })
        // return
        delDocPhoto({
          "id": this.$root.$route.query.id,
          "type": 2,
        }).then(res => {
          console.log('res', res)
          uploadLp({
            filePath: e
          }).then(res => {
            addDocPhoto({
              "fileUrl": res.data.url,
              "typeNum": 2,
              "typeName": "勘验笔录",
              "docId": this.$root.$route.query.id,
            }).then(result => {
              this.$emit('upload', {...res, path, noCodeImg: this.noCodeImg})
            })
          }).catch(err => {
            console.log('err', err)
            this.$emit('upload', {code: 500})
          })
        })

      })
    },
    beforeSavePDF(e) {
      // e为导出的pdf（base64）
      // console.log('==== beforeSavePDF :', e);
      return

      const file = base64ToFile(e, 'jzjp021212.pdf', 'pdf');
      base64ToPath(e).then(path => {
        // this.$emit('upload', {
        //   ...{
        //     code: 0,
        //     data: {
        //       url: 'http://47.92.235.205/lppdf/2025/08/13/1955435227065749506.pdf'
        //     }
        //   },
        //   path
        // })
        // return
        uploadLpPdf({
          file,
        }).then(res => {
          this.$emit('upload', {...res, path})
        }).catch(err => {
          console.log('err', err)
          this.$emit('upload', {code: 500})
        })
      })

    },
  }
};
</script>
<style scoped lang="scss">
$text-padding: 10px 0px;
#render-dom {
  width: 794px;
  font-family: "宋体";
  padding: 0 70px;
  color: #000;
  .table {
    position: relative;
    height: 1123px;
    border: 1px solid rgba(7, 7, 7, 0);
  }

  .title {
    font-size: 24px;
    font-weight: bold;
    margin-top: 22px;
    text-align: center;
  }

  .sub-title {
    margin-top: 48px;
    font-size: 16px;
    text-align: right;
  }

  .unline {
    border-bottom: 1px solid #000;
  }

  .content-text {
    margin-top: 24px;
    font-size: 20px;

    & > view {
      padding: $text-padding;
    }
  }

  .text-padding {
    padding: $text-padding;
  }

}
</style>
